<template>
	<view class="All">
		<view class="hello">欢迎来到乐智出游</view>
		<!-- <view class="welcome">手机号登录</view> -->
		<view class="phone">
			<input id="phone" class="phoneInput" type="" maxlength="11" adjust-position="false"
			  placeholder="请输入手机号" placeholder-class="phonePlace" @input="handleInput" v-model="phone"/>
		</view>
		<view class="pwd">
			<input id="phone" class="phoneInput" type="password"  adjust-position="false"
			  placeholder="请输入密码" placeholder-class="phonePlace" @input="handleInput" v-model="pwd"/>
		</view>
		<view class="padding-tb-sm text-right next" ><button class="cu-btn round" :class="btnClass" >登录</button></view>
		<view class="agree">
			<text class="agreeLeft">登录即同意</text>
			<text class="agreeRight" >《乐智出游用户协议》</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				pwd:'',
				btnClass: 'line-gray'
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			console.log('点击了自定义按钮')
			if(e.index==0){
				uni.navigateTo({
					url:'../loginPwd/loginPwd'
				})
			}
			
		},
		methods: {
			handleInput() {
				if (this.phone.length == 11&&this.pwd.length>0) {
					this.btnClass = 'bg-purple';
				} else {
					this.btnClass = 'line-gray';
				}
			},
		}
	}
</script>

<style scoped>
	.All{
		width:100%;
		height:100vh;
		background:rgba(255,255,255,1);
		opacity:1;
		padding: 30px 30px 0;
	}
	.hello{
		padding-top: 10vh;
		font-size:60rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		opacity:1;
	}
	.welcome{
		padding-top: 2vh;
		font-size:16px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(133, 136, 139, 1.0);
		opacity:1;
	}
	.phone{
		/* height: 5vh; */
		margin-top: 8vh;
		background-color: #dcdbdd;
		border-radius:60rpx ;
	}
	.pwd{
		height: 8vh;
		margin-top: 4vh;
		background-color: #dcdbdd;
		border-radius:60rpx ;
	}
	.phoneInput{
		height: 8vh;
		font-size:46rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		opacity:1;
		padding-left: 60rpx;
	}
	.phonePlace{
		font-size:40rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:#F8F8F8;
		opacity:1;
	}

	.agree{
		padding-top: 8vh;
		display: flex;
		justify-content: center;
	}
	.agreeLeft{
		height:17px;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:500;
		line-height:17px;
		color:rgba(153,153,153,1);
		opacity:1;
	}
	.agreeRight{
		height:17px;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:500;
		line-height:17px;
		color:rgba(255,177,0,1);
		opacity:1;
	}
	.button{
		margin-top: 4vh;
	}
	.denglu{
		height: 6vh;
		line-height: 6vh;
		background-color: purple;
		border-radius:60rpx ;
		color: white;
	}
</style>